<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ include file="/static/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>后台管理--菜单列表</title>
    <link href="${ctxStatic}/layui/css/layui.css" rel="stylesheet"/>
    <link href="${ctxStatic}/css/kpiui.css" rel="stylesheet"/>
    <script src="${ctxStatic}/js/jquery-1.8.3.min.js?v=2.0" type="text/javascript"></script>
    <script src="${ctxStatic}/layui/layui.all.js" type="text/javascript"></script>
    <script src="${ctxStatic}/js/common.js" type="text/javascript"></script>
    <script src="${ctxStatic}/js/attendance/atttb.js" type="text/javascript"></script>
    <script src="${ctxStatic}/img/canvg2.js" type="text/javascript"></script>
    <script src="${ctxStatic}/img/html2canvas-0.4.1.js" type="text/javascript"></script>
    <script src="${ctxStatic}/img/canvg2.js" type="text/javascript"></script>
    <script src="${ctxStatic}/img/jspdf.min.js" type="text/javascript"></script>

    <style>

        #plugin {

            margin-top: -20px;

        }

        .pdf > table {
            width: 100%;
            font-size: .938em;
            border-collapse: collapse; /*边框会合并为一个单一的边框*/
        }

        .pdf th {
            text-align: left;
            padding: .5em .5em;
            font-weight: bold;
            background: #66677c;
            color: #fff;
        }

        .pdf td {
            padding: .5em .5em;
            border-bottom: solid 1px #ccc;
        }

        .pdf table, .pdf table tr th, .pdf table tr td {
            border: 1px solid #0094ff;
        }

    </style>
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item">

        <div class="layui-input-block">
            <input type="radio" lay-filter="erweima" name="sex" value="1" title="上月" checked="">
            <input type="radio" lay-filter="erweima" name="sex" value="2" onchange="changeType(this)" title="当月">
        </div>
    </div>
</form>
<input type="hidden" id="hiddeptname" value="${orgname}">

<div class="mess">
    <h1 style="text-align: center;
    color: white;
    margin-top: 20px;">当前没有公示信息</h1>
</div>
<div class="nobad" style="display: none">
    <h1 style="text-align: center;
    color: white;
    margin-top: 20px;">本月无扣减信息</h1>
</div>
<iframe id="fileData" style="width:98%;height: 90%;margin-left: 10px"></iframe>

<div class="pdf" style="display: none" id="table">

    <div class="orgname" style="text-align: center"></div>

    <table id="pdfData">
        <thead>
        <tr>
            <th colspan="6"></th>
            <th rowspan="2">交通补助贴扣减</th>
            <th rowspan="2">交通补助金额</th>

        </tr>
        <tr>
            <th>序号</th>
            <th>单位</th>
            <th>身份证号</th>
            <th>姓名</th>
            <th>病假</th>
            <th>事假</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
</body>

<script>
    var hidtablehight;

    $(function () {


        layui.use(['form'], function () {

            var form = layui.form
            form.render();
            form.on('radio(erweima)', function (data) {
                getData(data.value);
            });


        })
        getData(1);


    })

    function getPreMonth() {

        var year = new Date().getFullYear(); //获取当前日期的年份
        var month = new Date().getMonth() + 1; //获取当前日期的月份
        var day = new Date().getDate(); //获取当前日期的日
        var days = new Date(year, month, 0);
        days = days.getDate(); //获取当前日期中月的天数
        var year2 = year;
        var month2 = parseInt(month) - 1;
        if (month2 == 0) {//如果是1月份，则取上一年的12月份
            year2 = parseInt(year2) - 1;
            month2 = 12;
        }
        var day2 = day;
        var days2 = new Date(year2, month2, 0);
        days2 = days2.getDate();
        if (day2 > days2) {//如果原来日期大于上一月的日期，则取当月的最大日期。比如3月的30日，在2月中没有30
            day2 = days2;
        }
        // if (month2 < 10) {
        //     month2 = '0' + month2;//月份填补成2位。
        // }
        var t2 = year2 + '-' + month2 + '-' + day2;
        return new Date(t2);
    }

    function getData(type) {
        var year = new Date().getFullYear();
        var month = new Date().getMonth() + 1;
        if (type == 1) {
            year = getPreMonth().getFullYear();
            month = getPreMonth().getMonth() + 1;
        }
        var html = "房山公安分局" + $('#hiddeptname').val()+"单位";
        html += year + "年第" + month + "月交通补贴"

        $('.orgname').html(html)
        $.ajax({
            type: "POST",
            url: "getPDFData",
            data: {
                year: year,
                month: month,
                type: type
            },
            beforeSend: function (XHR) {

            },
            success: function (data) {
                data = eval('(' + data + ')');
                if (data) {
                    if (data.length == 1) {
                        getPdf(data[0].orgid, data[0].orgsummaryid)
                    }
                }
                console.log(data)
                return;
                console.log('pdf url--' + data)
                if (data != '') {
                    $('#fileData').attr('src', data);
                    $('.mess').hide();
                    $('.pageInfo').show();
                    $('#fileData').show();
                    $('#plugin').css('margin-top', -20)
                }
                else {
                    $('.mess').show();
                    $('.pageInfo').hide();
                    $('#fileData').hide();
                }
            },
            complete: function (XHR) {

            },
            error: function () {

            }
        });
    }

    function getPdf(orgid, orgsummaryid) {
        $.ajax({
            type: "POST",
            url: "get_tran_dept_pdf_list",

            data: {
                year: '',
                mouth: '',
                orgid: orgid,
                orgsummaryid: orgsummaryid,
                realname: '',
                page: 1,
                limit: 100000
            },
            beforeSend: function (XHR) {

            },
            success: function (data) {
                data = eval('(' + data + ')').data;
                if (data) {
                    if (data.length == 0) {
                        $('.mess').hide();
                        $('.nobad').show();
                        $('.pageInfo').hide();
                        $('#fileData').hide();
                        return;
                    }
                }else{
                        $('.mess').hide();
                        $('.nobad').show();
                        return;
                }

                $("#pdfData tbody").html("");
                for (var i = 0; i < data.length; i++) {


                    var tr = "<tr><td>" + (i + 1) + "</td>";
                    tr += "<td>" + data[i].orgname + "</td>";

                    tr += "<td>" + data[i].cardno + "</td>";
                    tr += "<td>" + data[i].realname + "</td>";
                    tr += "<td>" + (data[i].fallVaca == null ? '0' : data[i].fallVaca) + "</td>";
                    tr += "<td>" + (data[i].matterVaca == null ? '0' : data[i].matterVaca) + "</td>";

                    tr += "<td>" + data[i].lostMoney + "</td>";

                    tr += "<td>" + data[i].nowMoney + "</td></tr>";


                    $('#pdfData').append(tr);
                }
                // hidtablehight =  data.length * 70;

                // var orgname =$("#hidorgname").val();
                var year = new Date().getFullYear();
                var month = new Date().getMonth() + 1;
                var date = new Date();
                var nowtime = year + "年" + month + "月" + date.getDate() + "日" + date.getHours() + "时" + date.getMinutes() + "分";
                var targetDom = $("#table");
                hidtablehight= targetDom.height();

                watermark({watermark_txt: nowtime});

                //把需要导出的pdf内容clone一份，这样对它进行转换、微调等操作时才不会影响原来界面
                var copyDom = targetDom.clone();
                //新的div宽高跟原来一样，高度设置成自适应，这样才能完整显示节点中的所有内容（比如说表格滚动条中的内容）
                copyDom.width(targetDom.width() + "px");
                copyDom.height(targetDom.height() + "px");
                copyDom.css('display', 'block');
                copyDom.css({
                    "background-color": "white",
                    "position": "absolute",
                    "top": "800px",
                    "z-index": "-1",
                    "height": targetDom.height()
                });
                $('body').append(copyDom);
                svg2canvas(copyDom);
                html2canvas(copyDom, {
                    onrendered: function (canvas) {
                        var imgData = canvas.toDataURL('image/jpeg');
                        var img = new Image();
                        img.src = imgData;

                        // img.src = 'http://127.0.0.1:8080/1.pdf';
                        //根据图片的尺寸设置pdf的规格，要在图片加载成功时执行，之所以要*0.225是因为比例问题
                        img.onload = function () {
                            //此处需要注意，pdf横置和竖置两个属性，需要根据宽高的比例来调整，不然会出现显示不完全的问题
                            if (this.width > this.height) {
                                var doc = new jsPDF('l', 'mm', [this.width * 0.225,
                                    this.height * 0.225
                                ]);
                            } else {
                                var doc = new jsPDF('p', 'mm', [this.width * 0.225,
                                    this.height * 0.225
                                ]);
                            }
                            doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225,
                                this.height * 0.225);
                            //根据下载保存成不同的文件名


                            $.ajax({
                                type: "POST",
                                url: "createPDF",
                                data: {
                                    file: doc.output("datauristring"),
                                    year: new Date().getFullYear(),
                                    month: new Date().getMonth() + 1,
                                    orgid: orgid,

                                },
                                beforeSend: function (XHR) {

                                },
                                success: function (data) {


                                    if (data != '') {

                                        $('#fileData').attr('src', data);
                                        $('.mess').hide();
                                        $('.pageInfo').show();
                                        $('#fileData').show();
                                        $('#plugin').css('margin-top', -20)

                                    }
                                    else {
                                        $('.mess').show();
                                        $('.pageInfo').hide();
                                        $('#fileData').hide();
                                    }


                                },
                                complete: function (XHR) {

                                },
                                error: function () {

                                }
                            });


                            console.log(doc.output("datauristring"))
                            // doc.save('pdf_' + new Date().getTime() + '.pdf');
                        };
                        //删除复制出来的div
                        copyDom.remove();
                    },
                    background: "#fff",

                    //这里给生成的图片默认背景，不然的话，如果你的html根节点没设置背景的话，会用黑色填充。
                    allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas
                });


            },
            complete: function (XHR) {

            },
            error: function () {

            }
        });


    }

    function svg2canvas(targetElem) {
        var svgElem = targetElem.find('svg');
        svgElem.each(function (index, node) {
            var parentNode = node.parentNode;
            //由于现在的IE不支持直接对svg标签node取内容，所以需要在当前标签外面套一层div，通过外层div的innerHTML属性来获取
            var tempNode = document.createElement('div');
            tempNode.appendChild(node);
            var svg = tempNode.innerHTML;
            var canvas = document.createElement('canvas');
            //转换
            canvg(canvas, svg);
            parentNode.appendChild(canvas);
        });
    }

    function watermark(settings) {
        //默认设置
        var defaultSettings = {
            watermark_txt: "text",
            watermark_x: 20,//水印起始位置x轴坐标
            watermark_y: 20,//水印起始位置Y轴坐标
            watermark_rows: 20,//水印行数
            watermark_cols: 20,//水印列数
            watermark_x_space: 100,//水印x轴间隔
            watermark_y_space: 50,//水印y轴间隔
            watermark_color: '#aaa',//水印字体颜色
            watermark_alpha: 1,//水印透明度
            watermark_fontsize: '15px',//水印字体大小
            watermark_font: '微软雅黑',//水印字体
            watermark_width: 240,//水印宽度
            watermark_height: 80,//水印长度
            watermark_angle: 15//水印倾斜度数
        };
        //采用配置项替换默认值，作用类似jquery.extend
        if (arguments.length === 1 && typeof arguments[0] === "object") {
            var src = arguments[0] || {};
            for (key in src) {
                if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
                    continue;
                else if (src[key])
                    defaultSettings[key] = src[key];
            }
        }

        var oTemp = document.createDocumentFragment();

        //获取页面最大宽度
        var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
        var cutWidth = page_width * 0.0150;
        var page_width = page_width - cutWidth;
        //获取页面最大高度
        var page_height = parseInt(hidtablehight);
        console.log("页面高度："+page_height);
        // var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450;
        // var page_height = document.body.scrollHeight+document.body.scrollTop;
        //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
        if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
            defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
            defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
        }
        //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
        if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
            defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
            defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
        }
        var x;
        var y;
        for (var i = 0; i < defaultSettings.watermark_rows; i++) {
            y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
            for (var j = 0; j < defaultSettings.watermark_cols; j++) {
                x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

                var mask_div = document.createElement('div');
                mask_div.id = 'mask_div' + i + j;
                mask_div.className = 'mask_div';
                mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                //设置水印div倾斜显示
                mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.visibility = "";
                mask_div.style.position = "absolute";
                mask_div.style.left = x + 'px';
                mask_div.style.top = y + 'px';
                mask_div.style.overflow = "hidden";
                mask_div.style.zIndex = "9999";
                mask_div.style.pointerEvents = 'none';//pointer-events:none  让水印不遮挡页面的点击事件
                //mask_div.style.border="solid #eee 1px";
                mask_div.style.opacity = defaultSettings.watermark_alpha;
                mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                mask_div.style.fontFamily = defaultSettings.watermark_font;
                mask_div.style.color = defaultSettings.watermark_color;
                mask_div.style.textAlign = "center";
                mask_div.style.width = defaultSettings.watermark_width + 'px';
                mask_div.style.height = defaultSettings.watermark_height + 'px';
                mask_div.style.display = "block";
                oTemp.appendChild(mask_div);
            }
            ;
        }
        ;
        // $("#table").appendChild(oTemp);
        document.getElementById("table").appendChild(oTemp);
    }
</script>
</html>
